<template>
  <div class="comp-taskview">
    <Table class="mt-15" :columns="columns" :data="tasks" :loading="loading">
      <template slot="header">
        <span class="fb ml-15">{{header}}</span>
        <Tooltip class="ml-5" :content="$t('button.reload')">
          <Button shape="circle" icon="md-refresh" size="small" @click="$emit('onRefresh')"></Button>
        </Tooltip>
      </template>
      <template slot-scope="{ row }" slot="status">
        <Tag :color="row.statustag">{{$t('page.schedule.taskstatus.'+row.status)}}</Tag>
      </template>
      <template slot-scope="{ row }" slot="node">
        {{!row.isOver?'-':(row.appname + '(' + row.host + ':' + row.port + ')')}}
      </template>
      <template slot-scope="{ row }" slot="type">
        <Tag :color="row.typetag">{{!row.isOver?'-':$t('page.schedule.tasktype.'+row.type)}}</Tag>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <ButtonGroup>
          <Button @click="onDetail(row)">{{$t('button.view')}}</Button>
          <Button v-if="row.needPair" type="error" @click="onRemedy(row)">{{$t('page.schedule.view.execute')}}</Button>
        </ButtonGroup>
      </template>
    </Table>
    <TaskDetail v-if="detailRendered" ref="taskdetail" />
  </div>
</template>
<script>
  import TaskDetail from './taskdetail'
  export default {
    name: 'comp-taskview',
    components: { TaskDetail },
    props: {
      header: String,
      loading: Boolean,
      tasks: Array,
      schedule: {
        type: Boolean,
        default: false
      }, // 是否展示计划名称
    },
    watch: {
      tasks(tasks) {
        let task
        for (let i in tasks) {
          task = tasks[i]
          task.needPair = (task.status === 'FAILED' || task.status === 'OVERTIME')
          task.isOver = (task.status === 'FINISHED' || task.status === 'FAILED' || task.status === 'EXECUTING')
          switch (task.status) {
            case 'WAIT':
              task.statustag = 'lime'
              break
            case 'EXECUTING':
              task.statustag = 'green'
              break
            case 'FINISHED':
              task.statustag = 'success'
              break
            case 'OVERTIME':
            case 'FAILED':
              task.statustag = 'error'
              break
            case 'CANCELED':
            default:
              task.statustag = 'default'
              break
          }
          //
          switch (task.type) {
            case 'MANUALLY':
              task.typetag = 'primary'
              break
            case 'REMEDY':
              task.typetag = 'warning'
              break
            default:
              task.typetag = 'default'
              break
          }
        }
      }
    },
    data() {
      return {
        detailRendered: false,
        columns: [
          { renderHeader: (h, col) => { return h('span', this.$t('page.schedule.tasktb.status')) }, slot: 'status', width: 120 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.schedule.tasktb.executeTime')) }, key: 'executeTime', width: 170 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.schedule.tasktb.type')) }, slot: 'type', width: 120 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.schedule.tasktb.node')) }, slot: 'node' },
          { title: '', slot: 'action', width: 150, align: 'center' }
        ],
      }
    },
    created() {
      if (this.schedule) {
        this.columns.unshift({ renderHeader: (h, col) => { return h('span', this.$t('page.schedule.schtb.name')) }, key: 'schedule', ellipsis: true })
      }
    },
    methods: {
      onDetail(task) {
        this.detailRendered = true
        this.$nextTick(() => {
          this.$refs.taskdetail.show(task)
        })
      },
      onRemedy(task) {
        this.$Modal.confirm({
          title: this.$t('status.handlemodel.title'),
          content: this.$t('status.handlemodel.content'),
          onOk: () => {
            this.$md.dispatch('schedule_task_retry', { data: task.no }).then(data => {
              if (data.retCode === 1) this.$emit('onRefresh')
            })
          }
        })
      }
    },
  }
</script>
